<template>
  <div
    ref="transverse"
    class="drag"
    :style="style"
    @mousedown="mousedown"
  ></div>
</template>

<script>
export default {
  name: "Drag",
  props: {
    // 控件的背景色
    background: {
      type: String,
      default: () => {
        return "transparent";
      },
    },
    // 控件的宽度或者高度
    heightOrWidth: {
      type: String,
      default: () => {
        return "5px";
      },
    },
    // 横transverse 竖vertical
    type: {
      type: String,
      default: () => {
        return "transverse";
      },
    },
    // 绑定的dom
    // 横transverse时候分别为上下div，竖vertical为左右div
    bindingDom: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 绑定的dom最小宽度或者高度//只支持px//必须大于控件宽度或者高度
    // 横transverse时候分别为height，竖vertical为width
    domMinHeightOrWidth: {
      type: String,
      default: () => {
        return "100px";
      },
    },
    // 控件的移动范围-最大dom
    limitDom: {
      type: HTMLDivElement,
      default: () => {
        return window;
      },
    },
  },
  computed: {
    style() {
      // 横着 时候 的样式
      if (this.type === "transverse") {
        return {
          background: this.background,
          cursor: "n-resize",
          height: this.heightOrWidth,
          width: "100%",
        };
      }
      // 竖着 时候 的样式
      if (this.type === "vertical") {
        return {
          background: this.background,
          cursor: "e-resize",
          height: "100%",
          width: this.heightOrWidth,
        };
      }
      return {};
    },
  },
  data() {
    return {
      frist: true,
      moving: false,
      x: 0,
      y: 0,
    };
  },
  mounted() {},
  methods: {
    // 鼠标松开事件
    mouseup(e) {
      e.stopPropagation();
      this.x = 0;
      this.y = 0;
      this.moving = false;
      window.onmouseup = () => {};
      this.limitDom.onmousemove = () => {};
      // 页面可选中
      document.onselectstart = () => {
        return true;
      };
    },
    mousedown(e) {
      e.stopPropagation();
      // 页面不可选中
      document.onselectstart = () => {
        return false;
      };
      window.onmouseup = (e) => this.mouseup(e);
      this.limitDom.onmousemove = (e) => this.mousemove(e);
      this.x = e.clientX;
      this.y = e.clientY;
      this.moving = true;
    },
    mousemove(e) {
      if (this.type === "transverse") {
        this.mousemove_transverse(e);
      }
      if (this.type === "vertical") {
        this.mousemove_vertical(e);
      }
    },
    mousemove_vertical(e) {
      const domMinHeightOrWidth = parseFloat(
        this.domMinHeightOrWidth.split("px")[0]
      );
      const width0 = this.bindingDom[0].getBoundingClientRect().width;
      const width1 = this.bindingDom[1].getBoundingClientRect().width;
      if (this.moving) {
        const dx = e.clientX - this.x;
        this.x = e.clientX;
        if (width0 >= domMinHeightOrWidth && width1 >= domMinHeightOrWidth) {
          this.bindingDom[0].style.width = width0 + dx + "px";
          this.bindingDom[1].style.width = width1 - dx + "px";

          this.$refs.transverse.style.left =
            parseFloat(this.$refs.transverse.style.left.split("px")[0]) +
            dx +
            "px";
        } else {
          // 当小于最小宽度的时候,自动赋值为最小宽度,自动校准控件的位置
          if (width0 < domMinHeightOrWidth) {
            const xz = domMinHeightOrWidth - width0;
            this.bindingDom[0].style.width = domMinHeightOrWidth + "px";
            this.bindingDom[1].style.width = width1 - xz + "px";
            this.$refs.transverse.style.left =
              parseFloat(this.$refs.transverse.style.left.split("px")[0]) +
              xz +
              "px";
          }
          if (width1 < domMinHeightOrWidth) {
            const xz = domMinHeightOrWidth - width1;
            this.bindingDom[1].style.width = domMinHeightOrWidth + "px";
            this.bindingDom[0].style.width = width0 - xz + "px";
            this.$refs.transverse.style.left =
              parseFloat(this.$refs.transverse.style.left.split("px")[0]) -
              xz +
              "px";
          }
        }
      }
    },
    mousemove_transverse(e) {
      const domMinHeightOrWidth = parseFloat(
        this.domMinHeightOrWidth.split("px")[0]
      );
      const height0 = this.bindingDom[0].getBoundingClientRect().height;
      const height1 = this.bindingDom[1].getBoundingClientRect().height;

      if (this.moving) {
        const dy = e.clientY - this.y;
        this.y = e.clientY;
        if (height0 >= domMinHeightOrWidth && height1 >= domMinHeightOrWidth) {
          this.bindingDom[0].style.height = height0 + dy + "px";
          this.bindingDom[1].style.height = height1 - dy + "px";

          this.$refs.transverse.style.top =
            parseFloat(this.$refs.transverse.style.top.split("px")[0]) +
            dy +
            "px";
        } else {
          // 当小于最小高度的时候,自动赋值为最小高度,自动校准控件的位置
          if (height0 < domMinHeightOrWidth) {
            const xz = domMinHeightOrWidth - height0;
            this.bindingDom[0].style.height = domMinHeightOrWidth + "px";
            this.bindingDom[1].style.height = height1 - xz + "px";
            this.$refs.transverse.style.top =
              parseFloat(this.$refs.transverse.style.top.split("px")[0]) +
              xz +
              "px";
          }
          if (height1 < domMinHeightOrWidth) {
            const xz = domMinHeightOrWidth - height1;
            this.bindingDom[1].style.height = domMinHeightOrWidth + "px";
            this.bindingDom[0].style.height = height0 - xz + "px";
            this.$refs.transverse.style.top =
              parseFloat(this.$refs.transverse.style.top.split("px")[0]) -
              xz +
              "px";
          }
        }
      }
    },
  },
};
</script>

<style scoped>
</style>
